//           $$\           $$\                 $$\
//           $$ |          $$ |                $$ |
//  $$$$$$\  $$ | $$$$$$\  $$$$$$$\   $$$$$$\  $$ |       $$$$$$$\  $$$$$$$\  $$$$$$$\  $$$$$$$\
// $$  __$$\ $$ |$$  __$$\ $$  __$$\  \____$$\ $$ |      $$  _____|$$  _____|$$  _____|$$  _____|
// $$ /  $$ |$$ |$$ /  $$ |$$ |  $$ | $$$$$$$ |$$ |      \$$$$$$\  $$ /      \$$$$$$\  \$$$$$$\
// $$ |  $$ |$$ |$$ |  $$ |$$ |  $$ |$$  __$$ |$$ |       \____$$\ $$ |       \____$$\  \____$$\
// \$$$$$$$ |$$ |\$$$$$$  |$$$$$$$  |\$$$$$$$ |$$ |      $$$$$$$  |\$$$$$$$\ $$$$$$$  |$$$$$$$  |
//  \____$$ |\__| \______/ \_______/  \_______|\__|      \_______/  \_______|\_______/ \_______/
// $$\   $$ |
// \$$$$$$  |
//  \______/

// scss变量, 主要颜色和element-ui一致
$primary: #409eff;
$success: #67c23a;
$wrning: #e6a23c;
$danger: #f56c6c;
$info: #909399;

.flex {
  display: flex;
}

.flex-inline {
  display: inline-flex;
}

.flex-1 {
  flex: 1;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-row {
  flex-direction: row;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.align-start {
  align-items: flex-start;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: flex-end;
}

// 修改浏览器默认滚动条样式
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 0;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 8px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.15);
  transition: color 0.2s ease;
}

// 经常用到的类
.w-100 {
  width: 100px;
}

.link {
  text-decoration: none;
  color: $primary;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
